<#cenluan title="蹦跶一下" menu="tweet" validate="true" uploader="true">
    <ol class="breadcrumb">
        <li><a href="/tweet">蹦跶</a></li>
        <li class="active">蹦跶一下</li>
    </ol>
    <!--@if(!isEmpty(msg)){-->
    <div class="alert alert-danger">
        <button class="close" data-dismiss="alert">X</button>
        ${msg}
    </div>
    <!--@}-->
    <div class="row">
        <div class="col-md-6">
            <form action="/tweet/save" method="post">
                ${token}
                <div class="form-group">
                    <label for="tweetContent">没事就多蹦跶两下</label>
					<textarea class="form-control" rows="5" id="tweetContent" style="resize:vertical;"
                              placeholder="内容200字以内" required maxlength="200" minlength="1" name="content"></textarea>
                </div>
                <div class="form-group clearfix" id="photo-area">
                    <span id="picker" class="hide"></span>
                </div>
                <div class="form-group row">
                    <div class="col-md-5 mb20">
                        <button class="btn btn-default btn-block" type="button" id="btn-photo">
                            <span class="glyphicon glyphicon-picture"></span>&nbsp;添加图片
                        </button>
                    </div>
                    <div class="col-md-5">
                        <button class="btn btn-primary btn-block">
                            <span class="glyphicon glyphicon-ok"></span>&nbsp;提交
                        </button>
                    </div>
                </div>
            </form>

        </div>

    </div>
    <script>
        $(function () {
            var UPLOADER = WebUploader.create({
                auto: true,
                swf: "/static/ext/WebUploader/Uploader.swf",
                server: "/tweet/photo/upload",
                pick: {
                    id: "#picker",
                    multiple: true
                },//接收的文件类型
                accept: {
                    title: "Images",
                    extensions: "gif,jpg,jpeg,bmp,png",
                    mimeTypes: 'image/*'
                },
                compress: {
                    width: 1000,
                    height: 1000,
                    quality: 90,
                    allowMagnify: false,
                    crop: false,
                    preserveHeaders: true,
                    noCompressIfLarger: true,
                },
                fileNumLimit: 10,
                fileSingleSizeLimit: 10 * 1024 * 1024,
                duplicate: true,
                sendAsBinary: true

            });
            //加入文件失败提示
            UPLOADER.on("error", function (type) {
                var msg = "加入文件失败";
                if (type == "F_EXCEED_SIZE") {
                    msg = "文件过大，不能超过10M";
                } else if (type == "Q_EXCEED_NUM_LIMIT") {
                    msg = "文件总数超出限制，最多只能同时添加10张图片";
                } else if (type == "Q_EXCEED_SIZE_LIMIT") {
                    msg = "文件大小超出限制";
                } else if (type == "Q_TYPE_DENIED") {
                    msg = "不支持的文件格式";
                }
                alert(msg);
            });
            //文件上传成功事件
            UPLOADER.on("uploadSuccess", function (file, response) {
                var ipt = $("<input type='hidden' name='photoId' value='" + response.id + "'>");
                $("form").prepend(ipt);
                var div = $("<div></div>");
                div.css("width", "100px").css("height", "100px").css("position", "relative").css("float", "left").css("margin-right", "20px");
                div.append("<img src='" + response.url + "' class='img-responsive'>");
                div.append("<button class='pk-close'>X</button>");
                div.find(".pk-close").click(function () {
                    div.remove();
                    ipt.remove();
                    $.get("/tweet/photo/delete/" + response.id);
                });
                $("#photo-area").append(div);
            });

            UPLOADER.on("uploadError", function (file, reason) {
                if (!confirm("文件上传失败，是否重试")) {
                    return;
                }
                UPLOADER.retry(file);
            });
            $("#btn-photo").click(function () {
                $(":file").trigger("click");
            });
            $("form").validate({
                submitHandler: function (form) {
                    $("form").find("button").button("loading");
                    form.submit();
                }
            });
        });
    </script>
</#cenluan>